import React, { useState } from "react";
import Card from "../UI/Card/Card.js";
import "./LogsForm.css";
const LogsForm = (props) => {
  let [inputDate, setInputDate] = useState("");
  let [inputDesc, setInputDesc] = useState("");
  let [inputTime, setInputTime] = useState("");
  const dateChangeHandler = (e) => {
    setInputDate(e.target.value);
  };
  const descChangeHandler = (e) => {
    setInputDesc(e.target.value);
  };
  const timeChangeHandler = (e) => {
    setInputTime(e.target.value);
  };

  const formSubmitHandler = (e) => {
    e.preventDefault();

    const newLog = {
      date: new Date(inputDate),
      desc: inputDesc,
      time: +inputTime,
    };
    //提交完成后清除数据
    //console.log(newLog); //怎么把这个数据存到数组里？？？？
    /**
     * 组件之间的通信？
     * 变量提升多个组件都需要访问的数据需要将变量提升到 共有的祖先中
     * 这样就可以使得多个组件都能访问到
     * 父传子  props
     * 子传父  自定义事件和 vue一样的道理
     */

    props.onSaveLog(newLog);

    setInputDate("");
    setInputDesc("");
    setInputTime("");
  };

  // console.log("props.onSaveLog", props.onSaveLog);

  return (
    <Card className="logs-form">
      <form onSubmit={formSubmitHandler}>
        <div className="form-item">
          <label htmlFor="date">日期</label>
          <input
            id="date"
            type="date"
            onChange={dateChangeHandler}
            value={inputDate}
          />
        </div>
        <div className="form-item">
          <label htmlFor="desc">内容</label>
          <input
            id="desc"
            type="text"
            onChange={descChangeHandler}
            value={inputDesc}
          />
        </div>
        <div className="form-item">
          <label htmlFor="time">时长</label>
          <input
            id="time"
            type="number"
            onChange={timeChangeHandler}
            value={inputTime}
          />
        </div>
        <div className="form-btn">
          <button>添加</button>
        </div>
      </form>
    </Card>
  );
};

export default LogsForm;
